<script lang="ts">
    import { onMount } from 'svelte';
    import { navigate } from 'svelte-routing';
    import { writable } from 'svelte/store';
    import { formatDate } from '../../utils/time';
    import { get, post } from '../../utils/api';
    import { addToast } from '../../stores/toastStore';
    import Header from '../../components/garage/Header.svelte';

    const formData = writable({
        client_name: "甲方名", // 
        plate_number: '鄂AFG2129', // 车牌号
        chassis_number: 'LBGHG52H5F1234567', // 车架号
        model: 'SUV', // 车型
        key_present: 1, // 是否有钥匙
        can_drive: 1, // 是否可行驶
        address_from: "潜山市龙关村青年组", // 出发地
        address_to: "潜山市何庄村何庄组", // 目的地
    });

    let keyPresent;
    let canDriver;
    formData.subscribe(value => {
        keyPresent = String(value.key_present);
        canDriver = String(value.can_drive);
    });

    function updateKeyPresent(value) { // 有无钥匙
        formData.update(data => {
            data.key_present = parseInt(value, 10);;

            return data;
        });
    }
    function updateCanDrive(value) { // 可否行驶
        formData.update(data => {
            data.can_drive = parseInt(value, 10);;

            return data;
        });
    }
    
    const handleSubmit = async () => {
        const data = $formData;
        data['entry_at'] = formatDate(data['entry_at'])

        try {
            const result = await post('/operation/logistics-inquiries', data);

            navigate('/logistics-inquiry-result?id='+result.data.id)

            addToast('申请成功', 'info', 3000);
        } catch (error) {
            addToast('提交失败'+error, 'error', 3000);
        }
    };

    onMount(() => {
    });
</script>

<main>
    <Header title="物流询价" />
    <div class="bg-white p-4 rounded-lg border border-gray-200 shadow-sm">
        <div class="form-group mb-4">
            <label class="text-gray-600">甲方名</label>
            <input type="text" class="input-field" placeholder="请输入甲方名" bind:value={$formData.client_name}>
        </div>
        <div class="form-group mb-4">
            <label class="text-gray-600">车牌号</label>
            <input type="text" class="input-field" placeholder="请输入车牌号" bind:value={$formData.plate_number}>
        </div>
        <div class="form-group mb-4">
            <label class="text-gray-600">车架号</label>
            <input type="text" class="input-field" placeholder="请输入车架号" bind:value={$formData.chassis_number}>
        </div>
        <div class="form-group mb-4">
            <label class="text-gray-600">车型</label>
            <input type="text" class="input-field" placeholder="请输入车型" bind:value={$formData.model}>
        </div>
        <div class="form-group mb-4">
            <label class="text-gray-600">车钥匙</label>
            <div class="flex items-center mt-1">
                <label class="mr-2 items-center">
                    <input type="radio" name="key_present" value="1" bind:group={keyPresent} on:change={() => updateKeyPresent(1)} class="mr-1">有
                </label>
                <label class="items-center">
                    <input type="radio" name="key_present" value="0" bind:group={keyPresent} on:change={() => updateKeyPresent(0)} class="mr-1">无
                </label>
            </div>
        </div>
        <div class="form-group mb-4">
            <label class="text-gray-600">正常行驶</label>
            <div class="flex items-center mt-1">
                <label class="mr-2 items-center">
                    <input type="radio" name="can_drive" value="1" bind:group={canDriver} on:change={() => updateCanDrive(1)} class="mr-1">可以
                </label>
                <label class="items-center">
                    <input type="radio" name="can_drive" value="0" bind:group={canDriver} on:change={() => updateCanDrive(0)} class="mr-1">不可
                </label>
            </div>
        </div>
        <div class="form-group mb-4">
            <label class="text-gray-600">出发地</label>
            <input type="text" class="input-field" placeholder="请输入出发地" bind:value={$formData.address_from}>
        </div>
        <div class="form-group mb-4">
            <label class="text-gray-600">目的地</label>
            <input type="text" class="input-field" placeholder="请输入目的地" bind:value={$formData.address_to}>
        </div>
        <div class="flex justify-end mt-4">
            <button class="bg-blue-500 text-white px-4 py-2 rounded shadow-sm" on:click={handleSubmit}>提交</button>
        </div>
    </div>
</main>

<style lang="scss">
  .form-group {
    display: flex;
    align-items: center;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e5e7eb;
    &:last-child {
      border-bottom: none;
    }
    label {
      flex: 0 0 100px;
      margin-right: 1rem;
    }
    input, textarea, select {
      flex: 1;
      border: none; // 去除 input 的边框
      padding: 0.5rem; // 添加内边距
      background-color: #f9fafb; // 设置背景颜色
      &:focus {
        outline: none; // 去除 focus 的边框
      }
    }
  }
  .form-group .flex.items-center label {
    margin-right: 2rem;
  }
  .input-area {
    border: 1px solid #ccc;
    padding: 8px;
    cursor: pointer;
  }
</style>
